<template>
  <div>
    <div class="ser_div">
      <el-row>
        <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 订单号 </el-col>
            <el-col :span="16">
              <el-input v-model="ser.order_number" type="number"></el-input>
            </el-col>
          </el-row>
        </el-col>
        <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 流水号 </el-col>
            <el-col :span="16">
              <el-input v-model="ser.serial_number"></el-input>
            </el-col>
          </el-row>
        </el-col>
        <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 客户 </el-col>
            <el-col :span="16">
              <el-select
                v-model="ser.customer_id"
                filterable
                placeholder="请选择客户"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in CustomerList"
                  :key="index"
                  :label="item.customer_name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 产品 </el-col>
            <el-col :span="16">
              <el-select
                filterable
                v-model="ser.product_id"
                @change="product_id_change"
                placeholder="请选择产品"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in productList"
                  :key="index"
                  :label="item.product_name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 型号 </el-col>
            <el-col :span="16">
              <el-select
                filterable
                v-model="ser.model_number_id"
                placeholder="请选择型号"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in ModelNumberList"
                  :key="index"
                  :label="item.model_number"
                  :value="item.id"
                >
                </el-option>
              </el-select>
              
            </el-col>
          </el-row>
        </el-col>
        <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 订单日期范围 </el-col>
            <el-col :span="16">
              <el-date-picker
                v-model="order_data"
                @change="order_data_change"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-col>
          </el-row>
        </el-col>
        <el-col>
          <el-button @click="search(0)" class="add_btn" icon="el-icon-search"
            >查询</el-button>
          <el-button @click="searchreset" icon="el-icon-refresh" class="add_btn"
            >重置</el-button>
          <el-button @click="search(2)" icon="el-icon-plus" class="add_btn"
            >导出</el-button>
          <el-button @click="add_product" icon="el-icon-plus" class="add_btn">批量添加到成品库</el-button>
        </el-col>
      </el-row>
    </div>

   
    <el-table
      :data="dataList"
      v-loading="loading"
      stripe
      style="width: 100%"
      @selection-change="handleSelectionChange"
      border
    >
      <el-table-column type="selection"> </el-table-column>
      <el-table-column prop="serial_number" label="接单日期" width="120">
        <template slot-scope="scope">
          {{ formatterTimes(scope.row.order.order_date)}}
        </template>
      </el-table-column>
      <el-table-column prop="finish_time" :formatter="formatterTime" label="完成日期" width="120">
      </el-table-column>
      <el-table-column label="客户名称" width="160">
        <template slot-scope="scope">
          {{ scope.row.order.customer.customer_name }}
        </template>
      </el-table-column>
      <el-table-column label="订单号" width="150">
        <template slot-scope="scope">
          {{ scope.row.order.order_number }}
        </template>
      </el-table-column>
      <el-table-column prop="serial_number" label="产品型号" width="120">
        <template slot-scope="scope">
          {{ scope.row.order.model_number_name.model_number }}
        </template>
      </el-table-column>
      <el-table-column prop="serial_number" label="方向" width="120">
        <template slot-scope="scope">
          {{ scope.row.order.direction }}
        </template>
      </el-table-column>
      <el-table-column prop="serial_number" label="规格" width="120">
        <template slot-scope="scope">
          {{ scope.row.order.specification?scope.row.order.specification.specification:'' }}
        </template>
      </el-table-column>
      <el-table-column prop="serial_number" label="颜色" width="120">
        <template slot-scope="scope">
          {{ scope.row.order.color.color }}
        </template>
      </el-table-column>
      <el-table-column prop="serial_number" label="备注" width="220">
        <template slot-scope="scope">
          {{ scope.row.order.remark }}
        </template>
      </el-table-column>

      <el-table-column prop="serial_number" label="紧急程度" width="120">
        <template slot-scope="scope">
          <div style="text-align: center;width: 100%;">
            <span
            v-if="scope.row.order.emergency_procedure == 1"
            style="color: #6880c6; font-weight: bold"
            >普通</span
          >
          <span
            v-if="scope.row.order.emergency_procedure == 2"
            style="color: #e77911; font-weight: bold"
            >紧急</span
          >
          <span
            v-if="scope.row.order.emergency_procedure == 3"
            style="color: #e71f11; font-weight: bold"
            >十万火急</span
          >
          </div> 
          
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100" fixed="right">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="add_product(scope.row)"
            >添加到成品库</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        @prev-click="prev"
        @next-click="next"
        :current-page.sync="pagination.page"
        :page-size="pagination.per_page"
        layout="total, prev, pager, next"
        :total="total"
      > 
      </el-pagination>
    </div>


    <el-dialog
      title="添加到成品库"
      :visible.sync="ishuojia"
      width="20%"
      :close-on-click-modal="false" @close="close_dialog">
      <div style="width:100%;margin: 0 auto;">

     
      <!-- <el-row style="display: flex; align-items: center">
        <el-col :span="6"> 件数 </el-col>
        <el-col :span="18">
          <el-input v-model="query.num" type="number"></el-input>
        </el-col>
      </el-row> -->
      <el-row style="display: flex; align-items: center;margin-top: 10px;">
        <el-col :span="6"> 仓库名称 </el-col>
        <el-col :span="18">
          <el-select v-model='query.warehouse_id' placeholder="请选择仓库" @change="select_huojiua" style="width: 100%;">
                <el-option v-for="(item, index) in cangkulist" :key="index" :label="item.warehouse_name"
                  :value="item.id">
                </el-option>
              </el-select>
        </el-col>
      </el-row>
      <el-row style="display: flex; align-items: center;margin-top: 10px;">
        <el-col :span="6"> 货架名称 </el-col>
        <el-col :span="18">
          <el-select v-model='query.goods_shelf_id' placeholder="请选择货架"  style="width: 100%;">
                <el-option v-for="(item, index) in huojialist" :key="index" :label="item.goods_shelf_name"
                  :value="item.id">
                </el-option>
              </el-select>
        </el-col>
      </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="ishuojia = false">取 消</el-button>
        <el-button type="primary" @click="push_cangku()">确定</el-button>
      </span>
    </el-dialog>
 
  </div>
</template>

<script>
import {
  getSemiFinishProductList,
  addFinishProduct,
  getWarehouseList,
  getCustomerList,
  getModelNumberList,
  getProductList,
  downloadcode
} from "@/api/product/index";
export default {
  data() {
 
    return {
      loading:true,
      formatterTime(row, column) {
        let data = row[column.property];
        return /\d{4}-\d{1,2}-\d{1,2}/g.exec(data);
      },
       // 搜索
       ModelNumberLists: [],
      ModelNumberList: [],
      order_data: [],
      ser: {
        serial_number:"",
        model_number_id: "",
        order_number: "",
        customer_id: "",
        product_id: "",
        order_date: "",
        is_replenishment: "",
        is_stock_up: "",
        start_time: "",
        end_time: "",
      },
      CustomerList: [],
      productList: [],
      ishuojia:false,
      dataList: [],
      pagination: {
        per_page: 10,
        page: 1,
      },
      total: 0,
      query:{
        ids:[],
        // num:'',
        warehouse_id:'',
        goods_shelf_id:'',
      },
      huojialist:[],
      cangkulist:[] 
     
    };
  },
  mounted() {
    this.getlist();
    this.getcangku()

    this.getproduct();
    this.getModel();
    this.getCustomer();
  },
  methods: {
    formatterTimes(data){
        return /\d{4}-\d{1,2}-\d{1,2}/g.exec(data).toString().slice(0,11);
    },
    // 指定查询
    search(type) {
      if(type==0){
        this.pagination.per_page=10
        this.pagination.page=1
      }
      getSemiFinishProductList({...this.ser,...this.pagination}).then((res) => {
        if (res.code == 200) {
          this.dataList = res.data.data;
          this.total = res.data.total;
          if (type == 2) {
            if (res.data.data.length > 0) {
              this.$message.success("正在导出订单列表");
              this.exports_w();
            }
          }
        }
      });
    },
    // 导出
    exports_w() {
      let data = {
        ...this.ser,
        export: 1,
      };
      downloadcode(data).then((res) => {
        //创建一个隐藏的a连接，
        const link = document.createElement("a");
        let blob = new Blob([res.data], { type: "application/vnd.ms-excel" });
        link.style.display = "none";
        //设置连接
        link.href = URL.createObjectURL(blob);
        link.download = "订单信息";
        document.body.appendChild(link);
        //模拟点击事件
        link.click();
      });
    },
    searchreset() {
      this.ser = {
        model_number_id: "",
        order_number: "",
        customer_id: "",
        product_id: "",
        order_date: "",
        is_replenishment: "",
        is_stock_up: "",
        start_time: "",
        end_time: ""
      };
      this.getlist()
    },
    //客户列表
    getCustomer() {
      getCustomerList().then((res) => {
        if (res.code == 200) {
          this.CustomerList = res.data.data;
        }
      });
    },
    //产品列表
    getproduct() {
      getProductList().then((res) => {
        if (res.code == 200) {
          this.productList = res.data.data;
        }
      });
    },
    // 型号列表
    getModel() {
      getModelNumberList().then((res) => {
        if (res.code == 200) {
          this.ModelNumberLists = res.data.data;
        }
      });
    },
    order_data_change(val) {
      this.ser.start_time = val[0];
      this.ser.end_time = val[1];
    },
    product_id_change(val) {
      console.log(val);
      this.ser.model_number_id = "";
      this.get_producModel(val)
    },
    get_producModel(id) {
      getModelNumberList({ product_id: id }).then((res) => {
        if (res.code == 200) {
          this.ModelNumberList = res.data.data;
        }
      });
    },
    select_huojiua(val){
      console.log(val)
      this.huojialist=[]
      this.query.goods_shelf_id=''
      this.cangkulist.forEach(element => {
        if(val==element.id){
          this.huojialist=element.goods_shelf
          console.log(this.huojialist)
        }
      });
      console.log(this.huojialist)
    },
    getcangku(){
      getWarehouseList().then((res) => {
        if (res.code == 200) {
          this.cangkulist = res.data.data;
        }
      });
    },
    getlist() {
      getSemiFinishProductList({...this.pagination,...this.ser}).then((res) => {
        if (res.code == 200) {
          this.dataList = res.data.data;
          this.total = res.data.total;
          this.loading=false
        }
      });
    },  
    close_dialog(){
      this.query={
            ids:[],
            num:'',
            warehouse_id:'',
            goods_shelf_id:''
          }
    },
    add_product(row) {
      console.log(row)
      if(row.order_id){
        this.query.ids.push(row.id);
        this.ishuojia=true
      }else{
        if(this.query.ids.length==0){
          this.$message({
            message: "请选择一条或多条数据",
            type: "error",
          });
          return false;
        }
        this.ishuojia=true
      }
    },
    push_cangku(){
      if(this.query.num==''){
        this.$message({
            message: "请填写件数",
            type: "error",
          });
          return false;
      }

      if(this.query.warehouse_id==''){
        this.$message({
            message: "请选择仓库",
            type: "error",
          });
          return false;
      }

      if(this.query.goods_shelf_id==''){
        this.$message({
            message: "请选择货架",
            type: "error",
          });
          return false;
      }

       addFinishProduct(this.query).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.ishuojia=false
          this.query={
            ids:[],
            num:'',
            warehouse_id:'',
            goods_shelf_id:''
          }
          this.getlist();
        }
      });
    },
    handleSelectionChange(val) {
      console.log(val);
      val.forEach(item=>{
        this.query.ids.push(item.id);
      })
    },
    handleSizeChange(val) {
      console.log(val);
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pagination.page = val;
      this.getlist();
    },
    prev() {
      this.pagination.page = this.pagination.page - 1;
      this.getlist();
    },
    next() {
      console.log("ss");
      this.pagination.page = this.pagination.page + 1;
      this.getlist();
    },
  },
};
</script>

<style scoped>
  .d{
    color: black!important;
  }
</style>
